<template>
  <u-popup
    closeable
    border-radius="24"
    @close="close"
    mode="bottom"
    height="68%"
    v-model="show"
  >
    <div class="wrapper">
      <div class="condition-box">
        <div class="header-title">持有条件</div>
        <div class="condition">
          <img src="" alt="" />
          <div class="desc">
            <span>泡泡王国 NFT</span>
            <span :style="{ color: '#009968' }" class="text">条件满足</span>
            <!-- <span :style="{ color: '#FF4252' }">不满足持有条件</span> -->
          </div>
        </div>
      </div>
      <div class="condition-box condition-count">
        <div class="header-title">消耗道具</div>
        <div class="condition">
          <img src="" alt="" />
          <div class="desc">
            <span class="text">50元无门槛优惠券兑换卡</span>
            <span>持有数量：5张</span>
            <span>消耗数量：1张</span>
          </div>
        </div>
        <view class="goods-skus-number flex flex-a-c flex-j-sb">
          <view class="view-class-title">数量</view>
          <uni-number-box
            class="uNumber"
            :min="1"
            :max="999"
            :disabled="false"
            v-model="num"
          ></uni-number-box>
        </view>
      </div>
      <div class="long-btn" @click="submitInvoice()">确认兑换</div>
    </div>
  </u-popup>
</template>
  <script>
import { addReceipt } from "@/api/members";
import uniNumberBox from "@/components/uni-number-box";

export default {
  props: ["res"],
  watch: {},
  components: {
    uniNumberBox,
  },
  data() {
    return {
      show: true,
    };
  },
  mounted() {},
  methods: {
    close(val) {
      this.$emit("callbackCondition", val);
    },
    submitInvoice() {
      this.close(this.submitData);
    },
  },
};
</script>
  <style scoped lang="scss">
@import "../../../uni.scss";
.wrapper {
  padding: 0 16rpx;
  margin-top: 108rpx;
  .condition-box {
    width: 100%;
    height: 240rpx;
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    margin-bottom: 16rpx;

    .header-title {
      color: #212121;
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }
    .condition {
      width: 100%;
      height: 128rpx;
      display: flex;
      img {
        width: 128rpx;
        height: 128rpx;
        border-radius: 16rpx;
        margin-right: 20rpx;
      }
      .desc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 28rpx;
        color: #757575;
        .text {
          margin-bottom: 20rpx;
          color: #212121;
        }
      }
    }
  }
  .condition-count {
    height: 364rpx;
  }
}
.goods-skus-number {
  justify-content: space-between;
  display: flex;
  margin-top: 82rpx;

  > .view-class-title {
    flex: 8;
  }

  > .view-class-input {
    flex: 1;
  }
}
</style>
  